<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12_ES12-逻辑赋值运算符</title>
  <!-- 
  在 JavaScript 的 ES12（ECMAScript 2021）中，引入了逻辑赋值运算符，这些运算符结合了逻辑运算和赋值操作，使得代码更加简洁和易读。以下是对逻辑赋值运算符的总结说明。
  ## 一、逻辑赋值运算符

  逻辑赋值运算符包括以下三种：

  1.  `&&=` （逻辑与赋值运算符）
  2.  `||=` （逻辑或赋值运算符）
  3.  `??=` （逻辑空值合并赋值运算符）

  ### 1. 逻辑与赋值运算符（ `&&=` ）

  - 定义：如果左侧的操作数为真，则将右侧的值赋给左侧的变量。
  - 语法：
  a &&= b;
  - 示例：
  let a = true;
    let b = false;
    a &&= b; // a 仍然为 false，因为 b 是 false
    console.log(a); // 输出: false

    let c = true;
    c &&= true; // c 仍然为 true
    console.log(c); // 输出: true
  ### 2. 逻辑或赋值运算符（ `||=` ）

  - 定义：如果左侧的操作数为假，则将右侧的值赋给左侧的变量。
  - 语法：
  a ||= b;
  - 示例：
  let a = false;
    let b = true;
    a ||= b; // a 变为 true，因为 b 是 true
    console.log(a); // 输出: true

    let c = 'Hello';
    c ||= 'World'; // c 仍然为 'Hello'
    console.log(c); // 输出: Hello
  ### 3. 逻辑空值合并赋值运算符（ `??=` ）

  - 定义：如果左侧的操作数为  `null`  或  `undefined` ，则将右侧的值赋给左侧的变量。
  - 语法：
  a ??= b;
  - 示例：
  let a;
    let b = 42;
    a ??= b; // a 变为 42，因为 a 是 undefined
    console.log(a); // 输出: 42

    let c = 0;
    c ??= 10; // c 仍然为 0，因为 0 不是 null 或 undefined
    console.log(c); // 输出: 0
  ## 二、总结

  - 逻辑赋值运算符：逻辑与赋值运算符  `&&=` 、逻辑或赋值运算符  `||=`  和逻辑空值合并赋值运算符  `??=`  提供了一种简便的方式来进行条件赋值，减少了代码的冗余。
  - 使用场景：这些运算符特别适合在处理默认值、状态更新等场景中使用，提高了代码的可读性和简洁性。
  -->
</head>
<body>

  <script>

    // 1. ||= 逻辑或赋值运算符
    // let a = 0;
    // a ||= 5;
    // console.log(a); // 0

    // let b = 0;
    // b ||= 5;
    // console.log(b); // 5

    // let c = null;
    // c ||= 5;
    // console.log(c); // 5

    // let d = undefined;
    // d ||= 5;
    // console.log(d); // 5

    // let e = false;
    // e ||= 5; // console.log(e); // false

    // let f = 'hello';
    // f ||= 5;
    // console.log(f); // hello

    // 2. &&= 逻辑与赋值运算符
    // let a = 0;
    // a &&= 5;
    // console.log(a); // 0

    // let b = 0; // b &&= 5;

    // 简便写法
     // 赋值运算符
    // const foo = "foo"
    let counter = 100
    counter = counter + 100
    counter += 50

    // 逻辑赋值运算符
    function foo(message) {
      // 1.||逻辑赋值运算符
      // message = message || "默认值"
      // message ||= "默认值"

      // 2.??逻辑赋值运算符
      // message = message ?? "默认值"
      message ??= "默认值"

      console.log(message)
    }

    foo("abc")
    foo()

    // 3.&&逻辑赋值运算符
    let obj = {
      name: "逻辑赋值运算符",
      running: function() {
        console.log("running~")
      }
    }

    // 3.1.&&一般的应用场景
    // obj && obj.running && obj.running()
    // obj = obj && obj.name
    obj &&= obj.name
    console.log(obj)

  </script>
  
</body>
</html>